<template>
  <el-container class="historyContainer">
    <div class="showNum">
      <span style="margin-bottom: 20px; display: inline-block;font-size:18px;font-weight: bold;"
        >历史任务/报警统计</span
      >
      <div style="width: 100%; height: 90%">
        <div
          class="summary"
          style="
            background-color: #f6f8fa;
            display: flex;
            height: 47%;
            justify-content: center;
            align-items: center;
          "
        >
          <div
            class="task-summary"
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 50%;
            "
          >
            <span class="icon" style="background-color: #ddecfd; padding: 5px"
              >📘</span
            >
            <span
              class="count"
              style="line-height: 50px; font-size: 30px; font-weight: 600"
              >{{ taskTotal }}</span
            >
            <span class="label">任务总数</span>
          </div>
          <div
            class="alarm-summary"
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 50%;
            "
          >
            <span class="icon" style="background-color: #f9e6e7; padding: 5px"
              >🚨</span
            >
            <span
              class="count"
              style="line-height: 50px; font-size: 30px; font-weight: 600"
              >{{ alarmTotal }}</span
            >
            <span class="label">报警总数</span>
          </div>
        </div>
        <div class="recent-activity" style="
            background-color: #f6f8fa;
            display: flex;
            height: 47%;
            justify-content: center;
            align-items: center;
            margin-top:20px;
          ">
          <div class="task-recent" style="
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 50%;
            ">
            <span class="label">7天内任务数</span>
            <span class="count" style="line-height: 50px; font-size: 30px; font-weight: 600">{{ taskLast7Days }}</span>
            <span
              class="comparison"
              :class="{
                increased: taskComparison > 0,
                decreased: taskComparison < 0,
              }"
            >
              {{ taskComparison }} 较上7天
            </span>
          </div>
          <div class="alarm-recent" style="
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 50%;
            ">
            <span class="label">7天内报警数</span>
            <span class="count" style="line-height: 50px; font-size: 30px; font-weight: 600">{{ alarmLast7Days }}</span>
            <span
              class="comparison"
              :class="{
                increased: alarmComparison > 0,
                decreased: alarmComparison < 0,
              }"
            >
              {{ alarmComparison }} 同比上7天
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="showCharts">
      <div class="timeLine">
        <div style="width: 40%"></div>
        <el-button color="#4065e0" plain @click="getToday" size="small"
          >今日</el-button
        >
        <el-button color="#4065e0" plain @click="getWeek" size="small"
          >7天内</el-button
        >
        <el-button color="#4065e0" plain @click="getMonth" size="small"
          >30天内</el-button
        >
        <el-date-picker
          v-model="date.createdate"
          type="datetimerange"
          style="margin-left: 15px"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="handleDateRangeChange"
          clearable
          size="small"
        />
      </div>
      <v-chart ref="currentRef"></v-chart>
    </div>
  </el-container>
</template>

<script setup >
import { computed, onMounted, ref, watchEffect } from "vue";
import * as echarts from "echarts";

const date = ref({
  createdate: [new Date(), new Date()],
  chartsDate: [],
});

const taskTotal = ref(0);
const alarmTotal = ref(0);
const taskLast7Days = ref(0);
const alarmLast7Days = ref(0);

const getYMD = (date) => {
  // 获取年份
  const year = date.getFullYear();
  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, "0");
  // 获取日期
  const day = String(date.getDate()).padStart(2, "0");
  // 拼接成 yyyy-MM-dd 格式的字符串
  const formattedDate = `${year}-${month}-${day}`;
  return formattedDate;
};
// 查看今天
const getToday = () => {
  date.value.createdate[0] = getYMD(new Date());
  date.value.createdate[1] = getYMD(new Date());
};
const getWeek = () => {
  const today = new Date();
  const sevenDaysAgo = new Date(today.setDate(today.getDate() - 7));
  date.value.createdate[0] = sevenDaysAgo.toISOString().split("T")[0];
  date.value.createdate[1] = getYMD(new Date());
};
const getMonth = () => {
  const today = new Date();
  const thirtyDaysAgo = new Date(today.setDate(today.getDate() - 30));
  date.value.createdate[0] = thirtyDaysAgo.toISOString().split("T")[0];
  date.value.createdate[1] = getYMD(new Date());
  console.log(date.value.createdate);
};
// 返回近7天日期
function getLast7DaysDates(date) {
  const dates = [];
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(date);
    currentDate.setDate(currentDate.getDate() - i); // 减去 i 天
    const year = currentDate.getFullYear();
    const month = (currentDate.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，所以加1
    const day = currentDate.getDate().toString().padStart(2, "0");
    dates.push(`${month}-${day}`);
  }
  return dates.reverse(); // 反转数组，使得最近的日期在前
}

watchEffect(() => {
  if (date.value.createdate) {
    date.value.chartsDate = getLast7DaysDates(date.value.createdate[1]);
  }
});
// 图表的配置
const currentRef = ref(null);
const renderOption = () => {
  return {

    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["任务数", "报警数"],
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: date.value.chartsDate,
    },
    yAxis: [
      {
        type: "value",
        name: "任务数",
        min: 0,
        max: 1, // 根据你的数据范围调整
        position: "left", // 左侧 Y 轴
      },
      {
        type: "value",
        name: "报警数",
        min: 0,
        max: 1, // 根据你的数据范围调整
        position: "right", // 右侧 Y 轴
      },
    ],
    series: [
      {
        name: "任务数",
        type: "line",
        data: [0, 0, 0, 0, 0, 0, 0],
        itemStyle: {
          color: "#7984ee", // 任务数线条颜色
        },
      },
      {
        name: "报警数",
        type: "line",
        data: [0, 0, 0, 0, 0, 0, 0],
        itemStyle: {
          color: "#409eff", // 报警数线条颜色
        },
      },
    ],
  };
};
onMounted(() => {
  currentRef.value.setOption(renderOption());
});
watchEffect(() => {
  if (currentRef.value) {
    currentRef.value.resize();
  }
});
</script>

<style lang="scss" scoped>
.historyContainer {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  .showNum {
    width: 37%;
    height: 100%;
    padding: 0px 10px;
  }
  .showCharts {
    width: 60%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-right:20px;
    .timeLine {
      display: flex;
      justify-content: space-between;
      text-align: end;
      margin-bottom: 30px;
    }
    .echarts {
      margin-left:1%;
      height: 88%;
      width:100%;
    }
  }
}
</style>
